<template>
  <div class="contains">
    <a-breadcrumb
      style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
    >
      <a-breadcrumb-item>链上市场</a-breadcrumb-item>
      <a-breadcrumb-item>所有发布</a-breadcrumb-item>
    </a-breadcrumb>
    <a-form layout="inline" :model="getDataDto">
      <a-form-item>
        <a-select
          ref="select"
          v-model:value="getDataDto.trade_type"
          style="width: 120px"
          placeholder="买卖情况"
        >
          <a-select-option value="0">卖出</a-select-option>
          <a-select-option value="1">买入</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-select
          ref="select"
          v-model:value="getDataDto.trade_state_id"
          style="width: 120px"
          placeholder="交易状态"
        >
          <a-select-option value="0">未撮合</a-select-option>
          <a-select-option value="1">已撮合</a-select-option>
          <a-select-option value="2">交割中</a-select-option>
          <a-select-option value="3">已交割</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="clear()"> 重 &nbsp; 置 </a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getDate()">
          <template #icon><SearchOutlined /></template>
          搜 &nbsp; 索
        </a-button>
      </a-form-item>
    </a-form>
    <a-divider />
    <div style="margin: 0 auto; text-align: center">
      <a-typography-title :level="3">交易流水</a-typography-title>
    </div>
    <a-table :columns="columns" :data-source="data">
      <template #trade_type="{ text }">
        {{ text ? "买入" : "卖出" }}
      </template>
      <template #trade_state_id="{ text }">
        {{
          text == 0
            ? "未撮合"
            : text == 1
            ? "已撮合"
            : text == 2
            ? "交割中"
            : "已交割"
        }}
      </template>
      <template #start_time="{ text }">
        {{ text == null ? "空" : text + ":00" }}
      </template>
      <template #end_time="{ text }">
        {{ text == null ? "空" : text + ":00" }}
      </template>
      <template #action="{ record }">
        <span>
          <a @click="showTimeSlotInfo(record.release_id)">详情</a>
          <!-- <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            更多
            <down-outlined />
          </a> -->
        </span>
      </template>
    </a-table>
  </div>
  <!-- 时间槽信息弹窗 -->
  <a-modal v-model:visible="isVisible" title="时间槽详情" @ok="closeWindow">
    <div>
      <a-table
        :dataSource="timeSlotList"
        :row-key="(record) => record.release_id"
        :columns="timeSlotColumns"
      ></a-table>
    </div>
  </a-modal>
</template>
<script>
import {
  SmileOutlined,
  DownOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import { get, post } from "@/common";
const columns = [
  {
    title: "发布人",
    dataIndex: "user_id",
    key: "user_id",
    ellipsis: true,
  },
  {
    title: "交易状态",
    dataIndex: "trade_state_id",
    key: "trade_state_id",
    slots: {
      customRender: "trade_state_id",
    },
  },
  {
    title: "买入/卖出",
    dataIndex: "trade_type",
    key: "trade_type",
    slots: {
      customRender: "trade_type",
    },
  },
  {
    title: "报价",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "交易总量",
    dataIndex: "total_elec",
    key: "total_elec",
  },
  {
    title: "日期",
    dataIndex: "date",
    key: "date",
  },
  {
    title: "交易开始时间",
    dataIndex: "start_time",
    key: "start_time",
    slots: {
      customRender: "start_time",
    },
  },
  {
    title: "交易结束时间",
    dataIndex: "end_time",
    key: "end_time",
    slots: {
      customRender: "end_time",
    },
  },
  {
    title: "发布时间",
    dataIndex: "release_time",
    key: "release_time",
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];
let data = ref();
const timeSlotColumns = [
  {
    title: "时间槽/时",
    dataIndex: "time_slot",
  },
  {
    title: "电量（固定值）",
    dataIndex: "elec_value",
  },
  {
    title: "电量上限",
    dataIndex: "elec_upper",
  },
  {
    title: "电量下限",
    dataIndex: "elec_lower",
  },
];
export default defineComponent({
  setup() {
    const getDataDto = reactive({
      trade_state_id: undefined,
      trade_type: undefined,
    });
    const getDate = () => {
      get("/trade/release/getRelease", getDataDto).then((res) => {
        data.value = res.data;
        clear();
      });
    };
    getDate();
    const clear = () => {
      getDataDto.trade_state_id = undefined;
      getDataDto.trade_type = undefined;
    };
    const timeSlotList = ref([]);
    const showTimeSlotInfo = (release_id) => {
      get("/info/user/timeSlot", { release_id: release_id }).then((res) => {
        timeSlotList.value = res.data;
      });
      isVisible.value = true;
    };
    const closeWindow = () => {
      isVisible.value = false;
    };
    const isVisible = ref(false);

    return {
      timeSlotList,
      timeSlotColumns,
      isVisible,
      closeWindow,
      showTimeSlotInfo,
      clear,
      getDataDto,
      data,
      columns,
      getDate,
    };
  },

  components: {
    SearchOutlined,
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style>
.contains {
  padding: 10px;
}
</style>